<template>
  <div class="version-wrapper shadow">
    <!-- <spin fix v-if="spinShow"></spin> -->

    <!-- 当前使用版本 -->
    <div class="version-item" v-if="dataList.currentVersion">
      <div class="version-item-title">当前使用版本</div>
      <div class="version-item-content flex center">
        <div class="version-content-no flex column">
          <span>版本号</span>
          <span>V{{dataList.currentVersion.version_no}}</span>
        </div>
        <div class="version-content-detail flex column">
          <span>发布时间：{{dataList.currentVersion.time_create}}</span>
          <span>
            描述：
            <p v-html="dataList.currentVersion.describe"></p>
          </span>
        </div>
        <div class="version-content-btn">
          <!-- <div class="preview-wrapper flex center column">
            <p>体验码</p>
            <img src="https://job.banchengyun.com/admin/version/getCode">
            <p>请先预览小程序，再提交至微信端团队审核</p>
          </div>-->
          <!-- <Button
            size="default"
            style="color: #2d8cf0;border-color: #2d8cf0;"
            @click.native="public"
            :loading="commitLastAuditLoading"
          >提交发布</Button>-->
          <!-- <Button size="default" v-else style="color: #2d8cf0;border-color: #2d8cf0;" @click.native="commitPreview(1,versionData.lastVersion,'lastVersion')" :loading="commitLastPreviewLoading">提交预览</Button> -->
        </div>
      </div>
    </div>

    <!-- 已提交审核版本 -->
    <div class="version-item" v-if="dataList.audit">
      <div class="version-item-title">微信审核版本</div>
      <div class="version-item-content flex center">
        <div class="version-content-no flex column">
          <span>版本号</span>
          <span>V{{dataList.audit.version.version_no}}</span>
        </div>
        <div class="version-content-detail flex column">
          <span>发布时间：{{dataList.audit.time_create}}</span>
          <span>
            描述：
            <p v-html="dataList.audit.version.describe"></p>
          </span>
          <span>状态：{{['进行中','已通过','已拒绝'][dataList.audit.status-1]}}</span>
          <span v-if="dataList.audit.status == 3">
            失败原因：
            <br>
            <span v-html="dataList.audit.reject_reason"></span>
          </span>
        </div>
        <div class="version-content-btn">
          <div class="preview-wrapper flex center column">
            <p>体验码</p>
            <img src="https://job.banchengyun.com/admin/version/getCode">
            <!-- <p>请先预览小程序，再提交至微信端团队审核</p> -->
          </div>
          <!-- <Button
            size="default"
            style="color: #2d8cf0;border-color: #2d8cf0;"
            @click.native="commit(dataList.newVersion.version_id)"
            :loading="commitAuditLoading"
          >提交审核</Button>-->
          <!-- <Button
            size="default"
            style="color: #2d8cf0;border-color: #2d8cf0;"
            @click.native="getImage"
            :loading="commitPreviewLoading"
          >提交预览</Button>-->
          <Button
            size="default"
            v-if="dataList.audit.status == 3"
            style="color: #2d8cf0;border-color: #2d8cf0;"
            @click.native="commit(dataList.audit.version.version_id)"
            :loading="releaseLoading"
          >重新提交审核</Button>
          <Button
            size="default"
            v-if="dataList.audit.status == 2"
            style="color: #2d8cf0;border-color: #2d8cf0;"
            @click.native="public"
            :loading="releaseLoading"
          >提交发布</Button>
          <Button
            size="default"
            v-if="dataList.audit.status == 1"
            style="color: #2d8cf0;border-color: #2d8cf0;"
            @click.native="unCommit"
            :loading="commitAuditUnLoading"
          >撤回审核</Button>
        </div>
      </div>
    </div>

    <!-- 可升级版本 -->
    <div class="version-item" v-if="dataList.newVersion">
      <div class="version-item-title">可更新升级新版本</div>
      <div class="version-item-content flex center">
        <div class="version-content-no flex column">
          <span>版本号</span>
          <span>V{{dataList.newVersion.version_no}}</span>
        </div>
        <div class="version-content-detail flex column">
          <span>发布时间：{{dataList.newVersion.time_create}}</span>
          <span>
            描述：
            <p v-html="dataList.newVersion.describe"></p>
          </span>
        </div>
        <div class="version-content-btn">
          <div class="preview-wrapper flex center column">
            <p>体验码</p>
            <img src="https://job.banchengyun.com/admin/version/getCode">
            <p>请先预览小程序，再提交至微信端团队审核</p>
          </div>
          <Button
            size="default"
            style="color: #2d8cf0;border-color: #2d8cf0;"
            @click.native="commit(dataList.newVersion.version_id)"
            :loading="commitAuditLoading"
          >提交审核</Button>
          <!-- <Button
            size="default"
            style="color: #2d8cf0;border-color: #2d8cf0;"
            @click.native="getImage"
            :loading="commitPreviewLoading"
          >提交预览</Button>-->
        </div>
      </div>
    </div>

    <!-- 增加体验者权限 -->
    <!-- <div @click="tapAddTaster" class="right-box flex center column column-center">
            <span>添加体验者权限<<</span>
    </div>-->

    <!-- 增加体验者弹框 -->
    <Modal title="添加体验者权限" v-model="showTasterModel">
      <Input type="text" v-model="tasterWxNum" placeholder="请输入体验者微信号"></Input>
      <div slot="footer">
        <Button size="large" type="primary" long :loading="tasterLoading" @click="addTaster">添加</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { timestampToDate } from "common/js/util";
import {
  GetVersion,
  GetCode,
  Commit,
  Release,
  UnCommit
} from "api/recuit/setting";

import { mapGetters } from "vuex";

export default {
  data() {
    return {
      // 体验者微信号
      tasterWxNum: "",

      // 显示体验者Modal
      showTasterModel: false,

      tasterLoading: false,

      spinShow: true,
      // Loading开始

      // 当前使用版本回退loading
      rollbackLoading: false,

      // 发布版本Loading
      releaseLoading: false,

      // 撤销审核Loading
      commitAuditUnLoading: false,

      // 提交可升级版本审核Loading
      commitAuditLoading: false,

      // 提交可升级版本预览Loading
      commitPreviewLoading: false,

      // 提交底部最新版本审核Loading
      commitLastAuditLoading: false,

      // 提交底部最新版本预览Loading
      commitLastPreviewLoading: false,

      // Loading结束

      // 版本列表数据
      versionData: {
        onlineVersion: {
          user_version: "",
          create_time: 0
        },
        openVersion: {
          user_version: "",
          create_time: 0
        },
        lastVersion: {
          user_version: "",
          create_time: 0
        }
      },

      // 最新版本数据
      latestAuditstatus: {},

      register: 0,

      versionShowFlag: false,

      dataList: {
        auditRecord: {},
        audit: {},
        currentVersion: {}
      }
    };
  },
  methods: {
    getData() {
      GetVersion().then(result => {
        this.dataList = result;
        this.dataList.audit &&
          (this.dataList.audit.time_create = this.getLocalTime(
            this.dataList.audit.time_create
          ));
        this.dataList.newVersion &&
          (this.dataList.newVersion.time_create = this.getLocalTime(
            this.dataList.newVersion.time_create
          ));
        this.dataList.currentVersion &&
          (this.dataList.currentVersion.time_create = this.getLocalTime(
            this.dataList.currentVersion.time_create
          ));
      });
    },
    commit(version_id) {
      Commit(version_id).then(result => {
        this.$Message.success("提交成功");
        setTimeout(() => {
          window.location.reload()
        }, 1000);
      }).catch(err => this.$Message.error(err))
    },
    getLocalTime(nS) {
      return new Date(parseInt(nS) * 1000)
        .toLocaleString()
        .replace(/:\d{1,2}$/, " ");
    },
    public() {
      Release()
        .then(result => {
          this.$Message.success("发布成功");
          setTimeout(() => {
            window.location.reload()
          }, 1000);
        })
        .catch(err => {
          this.$Message.error(err);
        });
    },
    unCommit() {
      UnCommit().then(result => {
        this.$Message.success("撤回成功");
        setTimeout(() => {
          this.getData();
        }, 1000);
      });
    }
  },
  created() {},
  mounted() {
    fetch("https://job.banchengyun.com/admin/version/getCode");
    this.getData();
  },
  components: {}
};
</script>

<style scoped>
.version-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 24px 24px 0 24px;
  background: #f5f7f9;
  height: calc(100vh - 64px);
}
.version-item {
  margin-bottom: 20px;
  background: white;
  padding: 20px;
}
.version-item-title {
  font-size: 16px;
  font-weight: bold;
  padding: 10px 0;
}

.version-item-content {
  font-size: 12px;
}
.version-content-no {
  flex: 0.3;
  text-align: center;
  padding: 10px 0;
}
.version-content-detail {
  flex: 0.4;
  padding: 10px 0;
}

.version-content-btn {
  flex: 0.3;
  text-align: center;
}

.preview-wrapper {
  margin-bottom: 10px;
}

.version-content-btn img {
  width: 100px;
  height: 100px;
}

.right-box {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 30px;
  background: white;
  padding: 6px;
  border-left: 1px solid #dcdee2;
  cursor: pointer;
}
</style>